<template>
	<theme-box title="机构添加">
		<form method="post" action="" class="form-horizontal" @submit.prevent v-el:form>
			<div class="box-body">
				<form-input title="机构名称" :required=true name="brhName" :maxlength="16"></form-input>
				<form-input title="机构编码" :required=true name="brhId"></form-input>
				<form-input title="银联机构地区编码" :required=true name="brhAreaCode"></form-input>			
				<form-input title="机构地址" :required=true name="brhAddress" :maxlength="50"></form-input>
				<form-input title="邮政编码" :required=true name="postCode"></form-input>
				<form-input title="联系人" :required=true name="contactName"></form-input>
				<form-input title="联系电话" :required=true name="telPhone"></form-input>
				<form-group title="级别"  :required=true>
					<select name="brhLeavel" class="form-control" v-model="level">
						<option value="0">母机构</option>
						<option value="1">1级</option>
						<option value="2">2级</option>
						<option value="3">3级</option>
						<option value="4">4级</option>
						<option value="5">5级</option>
					</select>
				</form-group>
				<form-group title="上级机构" :required=true v-if="hasChild">
					<select name="upBrhId" class="form-control">
							<option v-for="item in list" :value="item.id">
								{{item.name}}
							</option>
					</select>						
				</form-group>						
			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<v-button type="reset" @click="reset">重置</v-button>
				<v-button type="submit" theme="primary" class="pull-right">确认</v-button>
			</div>
			<!-- /.box-footer -->
		</form>
	</theme-box>
</template>

<script>

	var serialize = require('form-serialize');

	export default {
		  created() {
				
			},
			data: () => ({
				level: 1,
				hasChild:false,
				list:[]
			}),
//			watch:{
//						'level':'level'
//			},	 		
			watch:{
						'level':'getlist'
			},	 
			computed: {
				hasChild() {
						let level = this.level;
						return (level != 0)?true:false;
				}
			},		
			methods: {
				getlist() {
					let self = this;
					let data = {
						brhLeavel: self.level
					}
					self.$post({
						url: "/api/v1" + projectName_Url + "/list/brh/allBrhList.html",
						data
					}).then(response => {

					},response => {
						
						let list = [];
						(response.brhInfoList).forEach(function(element,index){
							let json = {
								id: element[0],
								name: element[1]
							}
							list.push(json)
						})		

						self.$set("list",list);
						
					});					
				},	
				reset() {
					$("label.error").remove();
					this.$els.form.reset();
				},
		    submit(data) {
						let self = this;
						self.$post({
							url: "/api/v1" + projectName_Url + "/sys/brh/add.html",
							data
						}).then(response => {

							let data = {
								title: "操作成功",
								content: "是否进入机构列表查看?"
							}
							Midway.confirm(data).then(function () {			
								self.$route.router.go('/organization/list');
							})
							self.reset();
						});		
				}
			},
			ready: function () {
				this.getlist();				
				let self = this;

				$(this.$els.form).submit(function () {
					return false;
				})
				$(this.$els.form).validate({
					submitHandler() {
						let form = this.currentForm;

						$(form).find("input").each(function () {
							$(this).val($.trim($(this).val()));
						});

						let _data = serialize(form, {
							hash: true
						});
						if(!_data.hasOwnProperty("upBrhId")) {
							_data.upBrhId = 0;
						}									
						self.submit(_data);
					},
					rules: {
						brhName: {
							required: true,
							maxlength: 16
						},
						brhId:{
							required: true,
							isCode: true,
							maxlength: 10
						},					
				    brhAreaCode: {
							required: true,
							isCode: true,		
							maxlength: 10
						},						
						brhAddress: {
							required: true,
							maxlength: 50
						},						
						postCode: {
							required: true,
							isZipCode: true
						},
						contactName: {
							required: true,
							maxlength: 10
						},
						telPhone: {
							required: true,
							isTel: true
						}							
					},
					messages: {
						brhName: {
							required: "机构名为必填项",
							maxlength: "机构名不多于16字"
						},
						brhAreaCode: {
							required: "银联机构地区编码为必填项",
							maxlength: "银联机构不多10位"
						},
						brhId:{
							required: "机构编码为必填项",
							maxlength:"机构编码不多10位"
						},						
						brhAddress: {
							required: "机构地址为必填项",
							maxlength: "机构地址不多于50字"							
						},
						postCode: {
							required: "邮政编码为必填项"
						},							
						contactName: {
							required: "联系人为必填项",
							maxlength: "不多于10字"
						},
						telPhone: {
							required: "联系电话为必填项"
						}								
					}
				});

			}
	}
</script>